<template>
	<view class="page">
		<view class="head">
			<!-- <image class='headSearch' src='{{iconUrl}}search.png'></image> -->
			<image class="icon-search" src="../../../../static/icons/jewel/search.png" mode="widthFix"></image>
			<input bindconfirm='searchTap' confirm-type='search' class='headInput' placeholder-style='font-size:26rpx;' @confirm="search_keyword" placeholder='输入您要搜索的珠宝'></input>
			<!-- #ifdef MP-WEIXIN -->
				<button class='open_contact' open-type="contact">
					<text class="iconfont icon-daipingjia"></text>
				</button>
			<!-- #endif -->
			
		</view>
		<!--排序按钮栏  -->
		<view class='sortBtn'>
			<view :class="tab_index == 1 ? 'fontColor':''" :data-order="sort_data[1]" data-by="id" @tap='sortTap' :data-index='1'>综合</view>
			<view :class="tab_index == 2 ? 'fontColor':''" :data-order="sort_data[2]" data-by="store_count" @tap='sortTap' :data-index='2'>销量</view>
			<view :class="tab_index == 3 ? 'fontColor':''" :data-order="sort_data[3]" data-by="b.shop_price" @tap='sortTap' :data-index='3'>价格</view>
			<view class='shaixuan' @tap='showDrawer'>筛选</view>
		</view>
		<!--商品列表  -->
		<view class='goodList'>
			<scroll-view scroll-y @scrolltolower='loadMore' enable-back-to-top='true'>
				<view class='listItem' @tap="go_detail(item.goods_id)" v-for="(item, index) in datalist" :key="index">
					<!--{{item.leaseid}}-->
					<view class='goodImgbox'>
						<image class='goodimg' :src='item.thumb'></image>
					</view>
					<view class='goodTitle'>{{item.goods_name}}</view>
					<view>
						<text class="watch-slogan slogan">{{item.show_return_title}}</text>
						<!-- <text class="watch-slogan slogan">99新</text> -->
					</view>
					<view class='goodTip'>
						<view class='goodPrice'>
							<view class='goodPrice-text'>¥</view>{{item.price}}
						</view>
						<view data-index='' class='user-coll' data-leaseid="">
							<text class='goodshoucang'>已售{{item.store_count}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!--筛选区域  -->
		<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer">
			<scroll-view scroll-y class="listww">
				<view class='goodAttr' v-for="(item, index) in attribute" :key="index">
					<view class='attrTittle'>{{item.name}}：</view>
					<view class='attr' :class="val.current" v-for="(val, key) in item.items" :data-arrkey="index" :data-itemkey="key" :key="key" :data-item_id="val.id" :data-attr_id="item.id" @tap="attr_search">{{val.item}}</view>
				</view>
				<view style="height:50px"></view>
			</scroll-view>
			<view class="uni-common-button">
				<view class="common-button" @tap="reset_search">重置</view>
				<view class="common-button sure" @tap="confirm_search">确认</view>
			</view>
		</uni-drawer>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../../../static/images/no_data.png" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	
	export default {
		data() {
			return {
				datalist: [],	// 列表数据
				tab_index: 1, 	// 默认显示的tab index 
				cat_id: 0,	// 分类id
				attribute: [],	// 列表属性
				attribute_id: [],	// 属性id
				search_data: {},	// 搜索的数据
				sort_data: {
					1: 'desc', 2: 'desc', 3: 'desc'
				},	// 排序数据
				is_load: 0,	// 是否已加载数据	
				bIsShowLoading: false,
				page: 1,
				totalPages: 1,
				loadtype: 'normal',	// 加载数据方式
				showRigth: false,
				showNodata: false,
				maker_num:0
			}
		},
		onLoad(options) {
			this.search_data.promotion_id = options.maker_num;
			if(options.cat_id) {
				this.cat_id = options.cat_id;
				this.search_data.cat_id = options.cat_id;
			}
			if(options.goods_name) {
				this.cat_id = options.goods_name;
				this.search_data.goods_name = options.goods_name;
			}
			this.getList(this.search_data)
		},
		// 上拉加载
		onReachBottom(){
			this.loadMore()
		},
		methods: {
			go_detail(goods_id){
				var url = '';
				if(this.search_data.promotion_id == 3) {
					url = '/pages/jewel/goods/show?goods_id=' + goods_id;
				}else{
					url = '/pages/jewel/agent/goods/show?goods_id=' + goods_id;
				}
				uni.navigateTo({
					url: url
				});
			},
			// 获取列表数据
			getList(data){
				let that = this;
				if(that.page <= that.totalPages){
					that.bIsShowLoading = true;
					new Promise((resolve, reject) => {
						henglang.post('pick/searchGoods', data, false,function(res){
							let data = res.data;
							let count = data.count;
							if(count == 0) that.showNodata = true;
							if(that.loadtype == 'plus') {
								that.datalist = that.datalist.concat(data.data);
							}else{
								that.datalist = data.data;
								that.totalPages = data.total_pages;
								uni.stopPullDownRefresh();
							}
							if(that.is_load == 0) {	// 首次加载才获取分类属性
								that.is_load = 1;
								resolve(that.cat_id);	// 分类id
							}
							that.bIsShowLoading = false;
						})
					}).then((cat_id)=>{
						// 获取分类属性
						henglang.get('goods/getGoodsAttribute', {cat_id: cat_id}, false, function(res){
							let data = res.data.data;
							that.attribute = data;
							that.bIsShowLoading = false;
						})
					})
				}
			},
			// 顶部排序索引
			sortTap(e){
				let index = e.currentTarget.dataset.index;
				let sort_data = this.sort_data;
				sort_data[index] = sort_data[index] == 'desc' ? 'asc' : 'desc';
				let order = e.currentTarget.dataset.order;	// 排序
				let by = e.currentTarget.dataset.by;	// 条件
				this.search_data.order = order;
				this.search_data.by = by;
				this.getList(this.search_data);
				this.tab_index = index;
				this.sort_data = sort_data;
			},
			// 筛选框
			selBlock(){
				this.skewing = '0px';
				this.coverOpacity = '0.5';
			},
			// 关闭筛选框
			screenClose(){
				this.skewing = '-750rpx';
				this.coverOpacity = '0';
			},
			showDrawer() {
				this.showRigth = true;
			},
			closeDrawer() {
				this.showRigth = false;
			},
			// 点击属性，搜索产品
			attr_search(e){
				let attr_id = e.currentTarget.dataset.attr_id;	// 
				let item_id = e.currentTarget.dataset.item_id;
				let arrkey = e.currentTarget.dataset.arrkey;	// 一维数组的key
				let itemkey = e.currentTarget.dataset.itemkey;	// items 下面数组的key
				let attribute = this.attribute;	//　属性规格数据集
				let attribute_id = this.attribute_id;	// 选中的attribute_id集合
				attribute[arrkey]['items'][itemkey].current = attribute[arrkey]['items'][itemkey].current == 'current' ? '': 'current';
				let array = {attr_id: attr_id, item_id: [item_id]};
				var is_includes = false;
				var is_includes_two = false;
				var len = 0;
				if(attribute_id.length>0) {
					var is_includes = false;
					var k = 0;
					for (let i in attribute_id) {
						if(attribute_id[i]['attr_id'] == attr_id) {
							k = i;
							is_includes = true; break;
						}
					}
					if(is_includes) {
						if(typeof attribute_id[k]['item_id'] == 'string') {
							attribute_id[k]['item_id'] = attribute_id[k]['item_id'].split(',');
						}
						is_includes_two = attribute_id[k]['item_id'].includes(item_id);	// 查询是否存在数组里面
						if(is_includes_two) {
							len = attribute_id[k]['item_id'].indexOf(item_id)	//如果存在数组里面，删除
							attribute_id[k]['item_id'].splice(len, 1);
						}else{
							attribute_id[k]['item_id'].push(item_id);
						}
					}else{
						attribute_id.push(array);
					}
				}else{
					attribute_id.push(array);
				}
				this.attribute_id = attribute_id;
				this.attribute = attribute;
			},
			
			// 获取键盘事件，搜索关键字
			search_keyword(e){
				let goods_name = e.target.value;
				this.search_data.loadtype = 'normal';
				this.search_data.goods_name = goods_name;
				this.getList(this.search_data);
			},
			// 清空已选择的属性规格
			reset_search(){
				this.attribute_id = [];
				let attribute = this.attribute;
				for (let i in attribute) {
					for(let k in attribute[i]['items']) {
						attribute[i]['items'][k]['current'] = '';
					}
				}
				this.attribute = attribute;
			},
			// 属性规格搜索
			confirm_search(){
				let that = this;
				that.page = 1;
				that.totalPages = 1;
				that.loadtype = 'normal';
				that.search_data.attr = this.get_json();
				that.search_data.page = 1;
				that.getList(this.search_data);
				that.closeDrawer();
			},
			// 解决变量被引用到内存地址
			get_json(){
				let attr_data = JSON.parse(JSON.stringify(this.attribute_id))
				for (let i in attr_data) {
					if(attr_data[i]['item_id'] !='') {
						attr_data[i]['item_id'] = attr_data[i]['item_id'].join(',');
					}else{
						attr_data.splice(i, 1);
					}
				}
				return attr_data;
			},
			loadMore(){
				this.loadtype = 'plus';
				this.page++;
				this.search_data.page = this.page;
				this.getList(this.search_data);
			}
		}
	}
</script>

<style>
.page {
  overflow-x: hidden;
}
/*公共样式  */
page{
  font-size: 34rpx;
  background: #efefef;
  padding-bottom: 50rpx;
}
/*头部  */
.head{
  width: 750rpx;
  display: flex;
  align-items: center;
  padding:0 15rpx 0 23rpx;
  position: relative;
  background: #fff;
}
.icon-search{
  width: 26upx;
  height: 26upx;
  position: absolute;
  top: 50%;
  margin-top: -13upx;
  left: 38rpx;
   z-index: 9;
}
.headInput{
  width: 618rpx;
  height: 60rpx;
  background: #efefef;
  box-sizing: border-box;
  padding-left: 50rpx;
  border-radius: 100rpx;
  /* #ifdef APP-PLUS */
  width: 658rpx;
  /* #endif */
}
.icon-daipingjia{
  font-size: 46rpx;
  position: absolute; 
  top: 20rpx;
  right: 40rpx;
  color: #555;
}

/*排序按钮  */
.sortBtn{
  width: 750rpx;
  height: 78rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 0 15rpx;
}
.sortBtn .fontColor{
  color: #fd6361;
  position: relative;
}
.sortBtn .fontColor::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4px;
  background: #fd6361;
  border-radius: 100rpx;
}
.sortBtn view{
  font-size: 25rpx;
  display: inline-block;
  color: #555;
  width: 180rpx;
  height: 78rpx;
  text-align: center;
  line-height: 78rpx;
}
/*商品列表  */
.goodList{
  width: 750rpx;
  /* height: auto; */
}
.listItem{
  width: 350rpx;
  background: #fff;
  margin: 15rpx 0 0 15rpx;
  border-radius: 6rpx;
  overflow: hidden;
  float: left;
  position: relative;
}
.slogan {
  background: #fd6361;
  color: #fff;
  border-radius: 100rpx;
  margin-left: 15rpx;
  padding: 5rpx 10rpx;
  font-size: 24rpx;
	position: relative;
	top: 6rpx;
}
.watch-slogan {
  border: 1px solid #fd6361;
  background: #fff;
  color: #fd6361;
}
.goodImgbox{
  width: 350rpx;
  height: 350rpx;
  text-align: center;
}
.goodImgbox .goodimg{
  width: 350rpx;
  height: 350rpx;
  border-radius: 6rpx;
}
.goodTitle{
  width: 350rpx;
  height: 90rpx;
  box-sizing: border-box; 
  padding: 15rpx 16rpx;
  color: #555;
  font-size: 25rpx;
  line-height:40rpx; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
}
.goodTip{
  width: 350rpx;
  box-sizing: border-box;
  padding: 16rpx 15rpx;
  overflow: hidden;
}
.goodPrice{
  font-size: 36rpx;
  float: left;
  color: #fd6361;
  font-weight: bold;
}
.goodPrice-text{
  font-size: 24rpx;
  display: inline-block
}
.user-coll{
  position: relative;
  top: -5rpx;
  float:right;
}
/* .shoucangImg{
  width: 27rpx;
  height: 27rpx;
  vertical-align: middle;
  margin-right: 10rpx;
} */
.goodshoucang{
  font-size: 24rpx;
  color: #999;
}
/*筛选区域  */
.screen{
  width: 700rpx;
   height: 100vh; 
  /* display: none; */
  position: fixed;
  top: 0;
  z-index: 4;
  transition: left 0.4s ease;
  -webkit-transition: left 0.4s ease;
}
.screen .cover{
  width: 750rpx;
   height: 100vh; 
  background: #000;
  position: fixed;
  top: 0;
  z-index: 1;
  transition: left,opacity 0.4s ease;
  -webkit-transition: left,opacity 0.4s ease;
}
.screen scroll-view{
  width: 650rpx;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
  background: #fff;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  transition: right 0.4s ease;
  -webkit-transition: right 0.4s ease;
}
.goodAttr{
  margin-bottom: 50rpx;
}
.goodAttr .current{
  border: 1px solid #bea374;
  color: #bea374;
  background: #fff;
}
.attrTittle{
  color: #555;
}
.attr{
  display: inline-block;
  width: auto;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20rpx;
  background: #eee;
  color: #555;
  border-radius: 8rpx;
  margin: 15rpx 20rpx 0 0;
  overflow: hidden;
  vertical-align: top;
}
.goodAttr .current {
	border:1px solid #ff5777;
	color:#ff5777;
	background:#fff;
}

.screenBottom{
  width: 650rpx;
  height: 100rpx;
  position: fixed;
  top: 0;
  z-index: 3;
  right: 0;
}
.screenBottom view{
  display: inline-block;
  height: 100rpx;
  width: 325rpx;
  color: #fff;
  font-size: 35rpx;
  text-align: center;
  line-height: 100rpx;
	border-top: 1px solid #ccc;
	background: #fff;
}
.reset{
  color: #666!important;
}
.queding{
	background: #ff5777;
}
.open_contact{
  border: none;
  padding-left:0px;
  padding-right:0px;
  overflow: auto;
  line-height:1.25;
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 86rpx;
  height: 86rpx;
  background: none!important
}
.open_contact::after{
  content: none
}
.uni-common-button{
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0upx;
	text-align: center;
	background: #000000;
	color: #ffffff;
	font-size: 32upx;
	display: flex;
	align-items: center;
}
.uni-common-button .common-button{
	flex: 1;
	padding: 30upx 0;
}
.uni-common-button .sure{
	background: #D71511;
}
.listww{
	padding: 20upx;
	height: 100%;
}
.m-no-data image{
	width: 100%;
	height: 100%;
}
</style>